<div class="container">
    <alfresco-upload-drag-area
        [parentId]="currentFolderId"
        [versioning]="versioning"
        [enabled]="documentList.hasCreatePermission()">
        <div *ngIf="errorMessage" class="error-message">
            <button (click)="resetError()" class="mdl-button mdl-js-button mdl-button--icon">
                <i class="material-icons">highlight_off</i>
            </button>
            <span class="error-message--text">{{errorMessage}}</span>
        </div>
        <ng-container *ngIf="useCustomToolbar">
            <adf-toolbar>
                <adf-toolbar-title>
                    <adf-breadcrumb *ngIf="!useDropdownBreadcrumb"
                                    class="files-breadcrumb"
                                    [target]="documentList"
                                    [folderNode]="documentList.folderNode">
                    </adf-breadcrumb>
                    <adf-dropdown-breadcrumb *ngIf="useDropdownBreadcrumb"
                                             class="files-breadcrumb"
                                             [target]="documentList"
                                             [folderNode]="documentList.folderNode">
                    </adf-dropdown-breadcrumb>
                </adf-toolbar-title>
                <button md-icon-button (click)="onCreateFolderClicked($event)">
                    <md-icon>create_new_folder</md-icon>
                </button>
                <button md-icon-button>
                    <md-icon>delete</md-icon>
                </button>
                <button md-icon-button [mdMenuTriggerFor]="menu">
                    <md-icon>more_vert</md-icon>
                </button>
                <md-menu #menu="mdMenu">
                    <button md-menu-item>
                        <md-icon>dialpad</md-icon>
                        <span>Redial</span>
                    </button>
                    <button md-menu-item disabled>
                        <md-icon>voicemail</md-icon>
                        <span>Check voicemail</span>
                    </button>
                    <button md-menu-item>
                        <md-icon>notifications_off</md-icon>
                        <span>Disable alerts</span>
                    </button>
                </md-menu>
            </adf-toolbar>
        </ng-container>
        <adf-document-list
            #documentList
            [permissionsStyle]="permissionsStyle"
            [creationMenuActions]="!useCustomToolbar"
            [currentFolderId]="currentFolderId"
            [contextMenuActions]="true"
            [contentActions]="true"
            [allowDropFiles]="true"
            [selectionMode]="selectionMode"
            [multiselect]="multiselect"
            (error)="onNavigationError($event)"
            (success)="resetError()"
            (nodeClick)="onNodeClick($event)"
            (permissionError)="handlePermissionError($event)">
            <data-columns>
                <data-column
                    key="$thumbnail"
                    type="image"
                    [sortable]="false"
                    class="image-table-cell">
                </data-column>
                <data-column
                    title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                    key="name"
                    class="full-width ellipsis-cell">
                </data-column>
                <!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
                <!--
                <data-column
                    title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
                    key="id"
                    class="full-width ellipsis-cell">
                    <template let-entry="$implicit">
                        <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
                    </template>
                </data-column>
                -->
                <data-column
                    title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
                    key="createdByUser.displayName"
                    class="desktop-only">
                </data-column>
                <data-column
                    title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
                    key="createdAt"
                    type="date"
                    format="medium"
                    class="desktop-only">
                </data-column>
            </data-columns>

            <content-actions>
                <!-- folder actions -->
                <content-action
                    icon="delete"
                    target="folder"
                    permission="delete"
                    [disableWithNoPermission]="true"
                    title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
                    (permissionEvent)="handlePermissionError($event)"
                    handler="delete">
                </content-action>
                <!-- document actions -->
                <content-action
                    icon="file_download"
                    target="document"
                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
                    handler="download">
                </content-action>
                <content-action
                    icon="delete"
                    target="document"
                    permission="delete"
                    [disableWithNoPermission]="true"
                    (permissionEvent)="handlePermissionError($event)"
                    title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
                    handler="delete">
                </content-action>
            </content-actions>
        </adf-document-list>
    </alfresco-upload-drag-area>
</div>
<div class="adf-metadata mat-elevation-z2" >
    <div style="float:left; width: 50%">
        <adf-card-view
            [properties]="metadata">
        </adf-card-view>
    </div>
</div>
<file-uploading-dialog #fileDialog></file-uploading-dialog>

